import React, { Component } from 'react';
import { connect } from 'react-redux';
import $ from 'jquery';
import './page_two.scss';

class PageTwo extends Component {

    componentDidMount() {
        let Hrheight = $('.BrandIntroductionTab_pagetwo_content_right').height();
        let msgcontent = $('.BrandIntroductionTab_pagetwo_content_right li');
        let active = $('.page_four_content_active');
        var msgtitle = $('.BrandIntroductionTab_pagetwo_content_right li');
        $('.BrandIntroductionTab_pagetwo_hr').height(Hrheight - 100);
        $(document).scroll(function () {
            var top = $(window).scrollTop();
            var Height = $(window).height();
            // 品牌历程滚动监听
            msgcontent.each(function () {
                if (Height + top - $(this).offset().top > Height / 2) {
                    var index = $(this).index();
                    active.css('top', $(this).position().top + 20 + 'px');
                    $(this).addClass('active').siblings().removeClass('active');
                    msgtitle.eq(index).addClass('active').siblings().removeClass('active');
                }
            });
        });
        msgtitle.on('click', (function () {
            var index = $(this).index();
            var Height = msgcontent.eq(index).position().top;
            $(this).addClass('active').siblings().removeClass('active');
            msgcontent.eq(index).addClass('active').siblings().removeClass('active');
            active.css('top', Height + 20 + 'px');
        }));
    }

    render() {
        return (
            <div className="BrandIntroductionTab_pagetwo">
                <div className="BrandIntroductionTab_pagetwo_img">
                    <img src={require('../../../../../static/img/brandIntroduction/page-2-1.jpg')} alt="" />
                </div>
                <div className="BrandIntroductionTab_pagetwo_content clearfix pr">
                    <div className="BrandIntroductionTab_pagetwo_hr"></div>
                    <div className="page_four_content_active pa"></div>
                    <ul className="BrandIntroductionTab_pagetwo_content_right pr">
                        <li className="active"><span>2018 扬帆</span>重新推出3D全屋定制品牌，以高标准打造真我标准</li>
                        <li><span>2017 酝酿</span>独具前瞻眼光的3D，为全屋定制战略进行缜密严苛的市场调研考察</li>
                        <li><span>2016 升级</span>3D品牌升级从“Dragon、Design、Door”升级至“Dragon、Design、Dream”，进军“ 全屋家居定制”领域，至此3D正式从单一产业企业升级为多产业整合的多品牌系列的集团化企业。</li>
                        <li><span>2015 认可</span>中国国务院正式批复“中德装备园”项目，3D超级工厂凭借全系德国设备与制造工艺与宝马、西门子、库卡机器人等德国系超级工厂共同被列入“中德制造2025”&“工业4.0示范基地”</li>
                        <li><span>2014 引进</span>以工业4.0为目标的第一条德系柔性生产线落成投产</li>
                        <li><span>2013 研发</span>3D产品研发中心研制了MT无胶锁扣技术</li>
                        <li><span>2012 量化</span>规划超级工厂沈阳生产基地，设计年产能100万套+</li>
                        <li><span>2011 实现</span>3D超级工厂项目正式启动</li>
                        <li><span>2010 登录</span>广州工厂创立，正式全面进军南方市场</li>
                        <li><span>2009 实现</span>启动广州工厂规划，实现全国南北大区的工厂布局</li>
                        <li><span>2008 茁壮</span>规模升级，拓展内部条件，迎来更多工厂、更多人才</li>
                        <li><span>2007 逆袭</span>中国房地产高速增长使产能遇到瓶颈 , 超级工厂进入中国的构想由此产生,使企业弯道超车，成为行业黑马</li>
                        <li><span>2006 扎根</span>建立1.3万平方第二分厂，产能翻倍</li>
                        <li><span>2005 认同</span>3D供应链管理整合升级，所选用的新型优质材料获得UKAS英国皇家质量认证</li>
                        <li><span>2004 渗透</span>放眼全国市场布局升级，启动全国渠道招商</li>
                        <li><span>2002 起航</span>创立中国第一个3D木门直营品牌专卖店，为全国市场树立起了标杆</li>
                        <li><span>2000 成长</span>占据中国北方为主销市场区域，以传统批发、代销形式开展木门经营销售蓝海</li>
                        <li><span>1994 诞生</span>以“为中国人设计的门（Dragon、Design、Door）”为创始理念，3D品牌应运而生;以“由一扇门开启中国人所有居家梦想”为运营宗旨进入中国;以木门行业开启3D的品牌梦想之路;</li>
                    </ul>
                </div>
            </div>
        )
    }
}

export default connect()(PageTwo)